<template>
	<view class="container">
		<view class="login-card">
			<view class="logo">
				<image src="../../static/itemicon/1.png" class="logo-img" mode="widthFix"></image>
			</view>

			<view class="role-tabs">
				<view :class="['tab-item', role === 0 ? 'active' : '']" @click="switchRole(0)">
					学员登录
					<view v-if="role === 0" class="tab-indicator"></view>
				</view>
				<view :class="['tab-item', role === 1 ? 'active' : '']" @click="switchRole(1)">
					讲师登录
					<view v-if="role === 1" class="tab-indicator"></view>
				</view>
			</view>

			<view class="form-container">
				<view class="input-group">
					<text class="input-label">手机号</text>
					<input class="input" placeholder="请输入手机号" placeholder-class="placeholder-style"
						@input="onPhoneInput" type="number" />
				</view>

				<view class="input-group">
					<text class="input-label">验证码</text>
					<view class="code-container">
						<input class="input code-input" placeholder="请输入验证码" placeholder-class="placeholder-style"
							@input="onCodeInput" type="number" />
						<button class="get-code-btn" @click="ongetCode" :disabled="!isValidPhone || isCodeSent"
							:class="{'disabled': !isValidPhone || isCodeSent}">
							{{codeButtonText}}
						</button>
					</view>
				</view>

				<view class="button-group">
					<button class="login-btn" @click="onLogin" :disabled="!agreePrivacy"
						:class="{'disabled': !agreePrivacy}">
						登录
					</button>
					<button class="register-btn" v-if="role == 0" @click="onRegister">
						注册账号
					</button>
				</view>
			</view>

			<view class="privacy-agreement">
				<label class="checkbox-container">
					<checkbox :checked="agreePrivacy" @click="toggleAgreePrivacy" color="#4a7dff" />
					<text class="agreement-text">我已阅读并同意</text>
				</label>
				<text class="privacy-link" @click="navigateToPrivacy">《隐私协议政策》</text>
			</view>
		</view>
	</view>
</template>


<script>
	import Toast from "../../wxcomponents/@vant/weapp/toast/toast";
	import {
		getCode,
		loginByCode
	} from "../../utils/getDate.js";
	export default {
		data() {
			return {
				role: 0, // 0学员 1讲师
				phone: "", // 手机号
				code: "", // 验证码
				isCodeSent: false, // 验证码是否已发送
				codeButtonText: "获取验证码", // 验证码按钮文本
				countdown: 60, // 倒计时
				isValidPhone: false, // 标记手机号是否有效
				timer: null, // 计时器
				agreePrivacy: false // 是否同意隐私协议
			};
		},
		onShow() {

		},
		methods: {
			// 切换角色
			switchRole(role) {
				this.role = role;
			},

			// 输入处理函数
			onPhoneInput(e) {
				const phone = e.detail.value;
				const isValid = this.validatePhone(phone);
				this.phone = phone;
				this.isValidPhone = isValid;
			},
			onCodeInput(e) {
				this.code = e.detail.value;
			},

			// 切换隐私协议同意状态
			toggleAgreePrivacy() {
				this.agreePrivacy = !this.agreePrivacy;
			},

			// 跳转到隐私协议页面
			navigateToPrivacy() {
				uni.navigateTo({
					url: '/pages/privacy/privacy' // 根据你的实际路由调整
				});
			},

			// 获取验证码
			ongetCode() {
				if (!this.validatePhone(this.phone)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: "none"
					});
					return;
				}

				let data = {
					phone: this.phone,
				}

				getCode(data).then(res => {
					if (res.state == "ok") {
						this.startCountdown()
					} else {
						uni.showToast({
							title: res.msg || "登录失败",
							icon: "none"
						})
					}
					// 原有逻辑
				}).catch(error => {
					console.error('获取验证码错误:', error);
					uni.showToast({
						title: "获取验证码失败",
						icon: "none"
					})
				})
			},

			// 开始倒计时
			startCountdown() {
				let countdown = 60;
				this.isCodeSent = true;
				this.codeButtonText = `${countdown}s`;

				this.timer = setInterval(() => {
					countdown--;
					this.codeButtonText = `${countdown}s`;

					if (countdown <= 0) {
						clearInterval(this.timer);
						this.isCodeSent = false;
						this.codeButtonText = "获取验证码";
					}
				}, 1000);
			},

			// 手机号校验
			validatePhone(phone) {
				const reg = /^1[3-9]\d{9}$/;
				if (!reg.test(phone)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: "none"
					});
					return false;
				}
				return true;
			},

			// 登录
			onLogin() {
				if (!this.agreePrivacy) {
					uni.showToast({
						title: "请先阅读并同意隐私协议",
						icon: "none"
					});
					return;
				}

				if (!this.isValidPhone || !this.code) {
					uni.showToast({
						title: "请输入完整的手机号和验证码",
						icon: "none"
					});
					return;
				}
				uni.showLoading({
					title: "正在登录"
				})

				// 使用.then方式调用
				loginByCode({
					phone: this.phone,
					code: this.code,
					role: this.role
				}).then(res => {
					Toast.clear()
					if (res.state == "ok") {
						uni.showToast({
							title: "登录成功",
							icon: "success"
						});
						if (this.role == 1) {
							uni.setStorageSync("userinfo", res.user)
							uni.setStorageSync("teacher", res.teacher)
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index',
								});
							}, 1000);

						} else {
							uni.setStorageSync("userinfo", res.user)
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/student/studentIndex',
								});
							}, 1000);
						}

					} else {
						uni.showToast({
							title: res.msg || "登录失败，请重试",
							icon: "none"
						});
					}
				})
			},

			onRegister() {
				uni.navigateTo({
					url: '/pages/login/register',
				});
			}
		},

		// 页面卸载时清除计时器
		onUnload() {
			clearInterval(this.timer);
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background: linear-gradient(135deg, #4a7dff 0%, #6a5acd 100%);
		padding: 40rpx;
		box-sizing: border-box;
	}

	.login-card {
		width: 100%;
		max-width: 600rpx;
		background-color: #fff;
		border-radius: 24rpx;
		padding: 60rpx 50rpx;
		box-shadow: 0 10rpx 30rpx rgba(74, 125, 255, 0.2);
		animation: fadeInUp 0.5s ease;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(40rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.logo {
		display: flex;
		justify-content: center;
		margin-bottom: 60rpx;
	}

	.logo-img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		box-shadow: 0 8rpx 20rpx rgba(74, 125, 255, 0.3);
	}

	.role-tabs {
		display: flex;
		justify-content: center;
		margin-bottom: 60rpx;
		border-bottom: 2rpx solid #f0f0f0;
		position: relative;
	}

	.tab-item {
		padding: 20rpx 40rpx;
		font-size: 32rpx;
		color: #666;
		position: relative;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.tab-item.active {
		color: #4a7dff;
		font-weight: 600;
	}

	.tab-indicator {
		position: absolute;
		bottom: -2rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 4rpx;
		background-color: #4a7dff;
		border-radius: 4rpx;
	}

	.form-container {
		margin-bottom: 40rpx;
	}

	.input-group {
		margin-bottom: 40rpx;
	}

	.input-label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 16rpx;
		font-weight: 500;
	}

	.input {
		width: 100%;
		padding: 24rpx 30rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 12rpx;
		font-size: 28rpx;
		background-color: #f9f9f9;
		transition: all 0.3s ease;
		box-sizing: border-box;
	}

	.input:focus {
		border-color: #4a7dff;
		background-color: #fff;
		box-shadow: 0 0 0 4rpx rgba(74, 125, 255, 0.2);
	}

	.code-container {
		display: flex;
		gap: 20rpx;
	}

	.code-input {
		flex: 1;
	}

	.get-code-btn {
		width: 150rpx;
		background-color: #4a7dff;
		color: #fff;
		border: none;
		border-radius: 12rpx;
		font-size: 26rpx;
		transition: all 0.3s ease;
		line-height: 80rpx;
		height: 80rpx;
		margin-top: 5rpx;
	}

	.get-code-btn.disabled {
		background-color: #c0c0c0;
		opacity: 0.7;
	}

	.button-group {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-top: 60rpx;
	}

	.login-btn {
		width: 100%;
		background-color: #4a7dff;
		color: #fff;
		border: none;
		border-radius: 12rpx;
		padding: 28rpx;
		font-size: 32rpx;
		font-weight: 600;
		transition: all 0.3s ease;
		box-shadow: 0 8rpx 20rpx rgba(74, 125, 255, 0.3);
	}

	.login-btn.disabled {
		background-color: #c0c0c0;
		opacity: 0.7;
		box-shadow: none;
	}

	.register-btn {
		width: 100%;
		background-color: transparent;
		color: #4a7dff;
		border: 2rpx solid #4a7dff;
		border-radius: 12rpx;
		padding: 28rpx;
		font-size: 32rpx;
		font-weight: 500;
		transition: all 0.3s ease;
	}

	.register-btn:active {
		background-color: rgba(74, 125, 255, 0.1);
	}

	.privacy-agreement {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #999;
		margin-top: 40rpx;
	}

	.checkbox-container {
		display: flex;
		align-items: center;
		margin-right: 8rpx;
	}

	.agreement-text {
		margin-left: 8rpx;
	}

	.privacy-link {
		color: #4a7dff;
		text-decoration: none;
	}

	/* 修复问题1：去除按钮点击时的灰色背景 */
	button {
		position: relative;
		overflow: hidden;
	}

	button::after {
		display: none;
	}

	/* 修复问题2：调整placeholder样式 */
	.placeholder-style {
		color: #c0c0c0;
		font-size: 28rpx;
	}

	.input {
		padding: 24rpx 30rpx;
		/* 确保输入框有足够的高度 */
		height: 88rpx;
		box-sizing: border-box;
	}

	/* 针对小程序button的额外样式重置 */
	/* 如果是H5，可能需要不同的重置方式 */
	button {
		margin: 0;
		padding: 0;
		background-color: transparent;
		border-radius: 0;
		line-height: 1;
	}

	button::after {
		border: none;
	}

	/* 确保按钮样式不受影响 */

	/* 如果是H5环境，可能需要添加 */
	/* 去除移动端点击高亮 */
	* {
		-webkit-tap-highlight-color: transparent;
	}
</style>